<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style>
            #gameCanvas{
            }
        </style>
        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                var timer;
                var cur = 0;
                var startTime;
                var elapsedTime;
                var grids = [];
                var ctx = document.getElementById('gameCanvas').getContext('2d');
                var path = 'number/number/';

                for (var x = 0; x < 5; x++) {
                    var row = []
                    for (var y = 0; y < 5; y++) {
                        var v = getRandomNonRepeating();
                        var img = new Image();
                        img.src = path + v + '.png';
                        var img1 = new Image();
                        img1.src = path + v + 'a.png';
                        row[y] = {x: x * 100, y: y * 100, val: v, clicked: false, img: img, img1: img1};
                    }
                    grids[x] = row;
                }

                $('#gameCanvas').click(function(e) {
                    var x = e.pageX - $(this).offset().left;
                    var y = e.pageY - $(this).offset().top;
                    x = Math.floor(x / 100);
                    y = Math.floor(y / 100);

                    var grid = grids[x][y];
                    if (grid.val - 1 == cur) {
                        grid.clicked = true;
                        cur = grid.val;
                    }
                });

                timer = setInterval(function() {
                    ctx.clearRect(0, 0, 500, 500);

                    for (var x = 0; x < 5; x++) {
                        for (var y = 0; y < 5; y++) {
                            var grid = grids[x][y];
                            if (grid.clicked) {
                                ctx.drawImage(grid.img1, grid.x, grid.y);
                            } else {
                                ctx.drawImage(grid.img, grid.x, grid.y);
                            }

                        }
                    }

                }, 100);
            });

            var randomNumbers = [];
            function getRandomNonRepeating() {
                var random = Math.floor(Math.random() * (25)) + 1;
                if (randomNumbers.indexOf(random) == -1) {
                    randomNumbers.push(random);
                    return random;
                } else {
                    return getRandomNonRepeating();
                }
            }

            function msToTime(s) {
                var ms = s % 1000;
                s = (s - ms) / 1000;
                var secs = s % 60;
                s = (s - secs) / 60;
                var mins = s % 60;
                var hrs = (s - mins) / 60;

                return hrs + ':' + mins + ':' + secs + '.' + ms;
            }
        </script>
    </head>
    <body>
        <div>
            <canvas id='timerCanvas' tabindex="2" height="100" width='500' ></canvas>
        </div>
        <div>
            <canvas id='gameCanvas' tabindex="1" height="500" width='500' ></canvas>
        </div>
        <div id="timerDisplay"></div>
    </body>
</html>
